<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>模板字面量-嵌套模板</title>
    </head>
    <body>
        <h1>模板字面量-嵌套模板</h1>
        <p>来源:<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings</a></p>
        <h3>嵌套模板</h3>
        <script>
            // 案例一：普通字符串
            function isLargeScreen() {
                var sw =screen.width;
                if(sw > 760){
                    return true;
                }else{
                    return false;
                }
            }
            var classes = 'header'
            classes += (isLargeScreen() ?
               '' : item.isCollapsed ?
                 ' icon-expander' : ' icon-collapser');
            // 案例一：普通字符串
            const classes = `header ${ isLargeScreen() ? '' :
            (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;
            // 案例三：嵌套模板字面量
            const classes = `header ${ isLargeScreen() ? '' :
             `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;
        </script>
    </body>
</html>